<template>
  <div class="accountNumber-container">
    <my-float fit>
      <my-float-item class="float-left">
        <div class="float-left-tit">
          <div><i class="el-icon-user-solid"></i> 角色</div>
        </div>
        <z-tree ref="roleTreeRef" :tree-id="roleTreeId" :nodes="roleTreeNodes" :setting="roleTreeSetting">
        </z-tree>
      </my-float-item>
      <my-float-item class="float-right">
        <div class="float-right-tit"><i class="el-icon-s-order"></i> 成员详情</div>
        <el-button type="primary" size="mini" icon="el-icon-plus" style="margin: 10px 0 10px 20px" @click='addEmpUser'> 新增成员
        </el-button>
        <div style="padding: 0 15px;">
          <el-table :data="tableData" stripe style="width: 100%" border>
            <el-table-column prop="nickname" label="姓名"></el-table-column>
            <el-table-column prop="username" label="账号"></el-table-column>
            <el-table-column prop="cellphone" label="手机号"></el-table-column>
            <el-table-column
              label="状态"
              width="150"
              prop="state">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.state"
                  :active-value="0"
                  :inactive-value="-1"
                  active-color="#13ce66"
                  inactive-color="#cccccc"
                  @change="changSwitch($event,scope.row,scope.$index)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              prop="handle">
              <template slot-scope="{row,$index}">
                <el-button plain type="primary" size="mini" icon="el-icon-edit-outline" @click="updateEmp($index, row)">编辑</el-button>
                <!-- <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteEmp($index, row)">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
      </my-float-item>
    </my-float>
    <!-- <div class="footer-btn">
      <el-button type="primary" size="small">保存设置</el-button>
    </div> -->
    <addEmpUser ref='addEmpUser'></addEmpUser>
    <editEmpUser ref='editEmpUser'></editEmpUser>
  </div>
</template>

<script>
  import zTree from '@/components/z-tree.vue'
  import company from '../../../plugins/zTree/css/zTreeStyle/img/diy/role.png'
  import addEmpUser from './code/addEmpUser.vue'
  import editEmpUser from './code/editEmpUser.vue'
  import { getRoleList } from '@/api/role.js'
  import { empListByRoleId, empUpdateState } from '@/api/emp.js'
  export default {
    components: {
      addEmpUser,
      editEmpUser,
      zTree
    },
    data: function() {
      return {
        roleTreeId: 'roleTreeId',
        roleTreeNodes: [],
        roleTreeSetting: {
          view: {
            showLine: true
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'roleId',
              pIdKey: 'rolePid',
              rootPId: '0'
            },
            key: {
              name: 'roleName',
              title: 'roleName'
            },
            keep: {
              leaf: true,
              parent: true
            }
          },
          callback: {
            onClick: this.roleTreeOnclick
          },
          edit: {
            enable: true, // 可编辑
            showRemoveBtn: false, // 显示删除按钮
            removeTitle: '删除节点',
            showRenameBtn: false, // 显示编辑按钮
            renameTitle: '编辑节点名称',
            drag: {
              autoExpandTrigger: false,
              isCopy: false,
              isMove: true,
              prev: true,
              next: true,
              inner: true,
              borderMax: 20,
              borderMin: -10,
              minMoveSize: 10,
              maxShowNodeNum: 10,
              autoOpenTime: 500
            }
          }
        },
        selectRoleNode: {},
        tableData: [],
        roleId: ''
      }
    },
    mounted() {
      this.loadRoleTree();
    },
    methods: {
      // 加载组织机构（角色树）
      async loadRoleTree() {
        // 获取角色树数据
        var res = await getRoleList();
        var data = res.data;
        for (var i = 0; i < data.length; i++) {
          data[i].icon = company;
        }
        this.roleTreeNodes = data;
        // 加载第一个节点
        setTimeout(() => {
          // 加载第一个节点
          var treeObj = this.$refs.roleTreeRef.getSyncTreeObj();
          var node = treeObj.getNodes()[0];
          treeObj.selectNode(node);
          this.selectRoleNode = node;
        }, 1000);
      },

      //= ===========角色树-回调函数=============
      roleTreeOnclick(event, treeId, treeNode) {
        this.roleId = treeNode.roleId;
        this.empList();
      },

      // 指定角色下列表
      async empList() {
        var res = await empListByRoleId(this.roleId)
        this.tableData = res.data;
      },

      addEmpUser() {
        this.$refs.addEmpUser.open(this.roleId);
      },
      updateEmp(index, row) {
        this.$refs.editEmpUser.open(row.userId);
      },
      // 开关切换
      changSwitch(event, row, index) {
        var params = {
            userId: row.userId,
            state: event
        };
        empUpdateState(params);
      }
    }
  }
</script>

<style scoped lang="scss">
  .accountNumber-container {
    height: 200px;
    min-height: calc(100% - 50px);

    .float-left {
      border-right: 2px solid #ededed;
      width: 300px;
      height: 100%;
      overflow-y: auto;

      .float-left-tit {
        color: #000;
        font-size: 15px;
        line-height: 34px;
        padding-left: 24px;
        font-weight: bold;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
      }
    }

    .float-right {
      width: calc(100% - 300px);
    }

    .float-right-tit {
      color: #000;
      font-size: 15px;
      line-height: 34px;
      padding-left: 24px;
      font-weight: bold;
      border-bottom: 1px solid #f1f1f1;
      padding: 5px 10px;
    }

    .footer-btn {
      height: 50px;
      box-sizing: border-box;
      border-top: 2px solid #ededed;
      text-align: center;
      line-height: 50px;
    }

    #rMenu {
      position: absolute;
      visibility: hidden;
      top: 0;
      background-color: #e2e2e2;
      text-align: left;
      padding: 2px;
    }

    #rMenu ul li {
      margin: 1px 0;
      padding: 0 5px;
      cursor: pointer;
      list-style: none outside none;
      background-color: #FFFFFF;
      display: block;
    }
  }
</style>
